<template>
  <div class="example">
    <!-- 加载中... -->
    <a-spin v-if="isLoading" />
    <div class="modal-header">
      <div class="modal-title">{{ l('LoginAttempts') }}</div>
    </div>
    <div class="modal-body">
      <div v-if="!userLoginAttempts.length">
        <a-empty />
      </div>
      <div v-else class="login-item" v-for="(item, index) in userLoginAttempts" :key="index">
        <!-- 登录状态 -->
        <a-row>
          <a-col :span="3" class="text-right">
            <label>{{ l('LoginState') }}：</label>
          </a-col>

          <a-col :span="21">
            <a-badge
              v-if="item.result == 'Success'"
              class="text-success"
              :text="l('Success')"
              status="success"
            />
            <a-badge
              v-if="item.result != 'Success'"
              class="text-error"
              :text="l('Failed')"
              status="error"
            />
          </a-col>
        </a-row>
        <!-- 时间 -->
        <a-row :gutter="8">
          <a-col :span="3" class="text-right">
            <label>{{ l('Time') }}：</label>
          </a-col>
          <a-col :span="21">{{ getLoginAttemptTime(item) }}</a-col>
        </a-row>
        <!-- IP地址 -->
        <a-row :gutter="8">
          <a-col :span="3" class="text-right">
            <label>{{ l('IpAddress') }}：</label>
          </a-col>
          <a-col :span="21">{{ item.clientIpAddress }}</a-col>
        </a-row>
        <!-- 客户端 -->
        <a-row :gutter="8">
          <a-col :span="3" class="text-right">
            <label>{{ l('Client') }}：</label>
          </a-col>
          <a-col :span="21">{{ item.clientName }}</a-col>
        </a-row>
        <!-- 浏览器 -->
        <a-row :gutter="8">
          <a-col :span="3" class="text-right">
            <label>{{ l('Browser') }}：</label>
          </a-col>
          <a-col :span="21">{{ item.browserInfo }}</a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import { UserLoginAttemptDto, UserLoginServiceProxy } from '/@/shared/service-proxies';

  export default defineComponent({
    name: 'login-attempts-modal',
    mixins: [ModalComponentBase],
    data() {
      return {
        isLoading: true,
        userLoginAttempts: [] as UserLoginAttemptDto[],
        userLoginService: new UserLoginServiceProxy(),
      };
    },

    created() {
      this.fillServiceProxy();
      this.userLoginService.getRecentUserLoginAttempts().then((result) => {
        this.isLoading = false;
        this.userLoginAttempts = result.items as UserLoginAttemptDto[];
      });
    },
    methods: {
      getLoginAttemptTime(userLoginAttempt: UserLoginAttemptDto): string {
        return (
          this._momentFromNow(userLoginAttempt.creationTime) +
          ' (' +
          this._moment(userLoginAttempt.creationTime) +
          ')'
        );
      },
    },
  });
</script>

<style lang="less" scoped>
  .text-right {
    text-align: right;
    padding-right: 10px;
  }
  .text-success {
    :deep(.ant-badge-status-text) {
      color: #55d187;
    }
  }
  .text-error {
    :deep(.ant-badge-status-text) {
      color: red;
    }
  }
  .login-item {
    margin: 5px 0 15px;
    padding: 20px 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  }
  .ant-row {
    margin-bottom: 5px;
  }
</style>
